<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>叮咚~~</title>
	<link rel="stylesheet" type="text/css" href="css/normalize.css" /><!--CSS RESET-->
	<link rel="stylesheet" type="text/css" href="css/htmleaf-demo.css">
	<link rel="stylesheet" href="./css/style.css">
</head>
<body>

<figure class="logo logo--top js-trigger">
  <img src="img/logo.svg">
</figure>

<a href="http://www.htmleaf.com/jQuery/Slideshow-Scroller/202001085884.html" target="_blank" class="resize">
  <div class="resize__inner">
    <figure class="logo logo--resize">
      <img src="img/logo.svg">
    </figure>
    <p>Please view in <span>full page</span> mode</p>
  </div>
</a>

<a href="http://www.htmleaf.com/jQuery/Slideshow-Scroller/202001085884.html" target="_blank" class="hi">
  Hi~😀
</a>

<a href="http://www.htmleaf.com/jQuery/Slideshow-Scroller/202001085884.html" target="_blank" rel="nofollow" class="menu-btn js-menu-btn">
  <div class="menu-btn__circles">
    <span class="menu-btn__circle menu-btn__circle--top js-menu-btn__circle--top"></span>
    <span class="menu-btn__circle menu-btn__circle--bottom js-menu-btn__circle--bottom"></span>
  </div>
  <div class="menu-btn__text">See this</div>
</a>

<div class="scroll" data-scroll>
  
  <nav class="filter">
    <ul class="filter__list">
      <li class="filter__item">
        <a href="#" class="filter__link is-active js-trigger">
          <div class="filter__link-mask" area-hidden><span>L</span></div>
         李月
        </a>   
      </li>
      <li class="filter__item">
        <a href="#" class="filter__link js-trigger">
          <div class="filter__link-mask" area-hidden><span>O</span></div>
          宝贝
        </a>   
      </li>
      <li class="filter__item">
        <a href="#" class="filter__link js-trigger">
          <div class="filter__link-mask" area-hidden><span>V</span></div>
          是
        </a>   
      </li>
       <li class="filter__item">
        <a href="#" class="filter__link js-trigger">
          <div class="filter__link-mask" area-hidden><span>E</span></div>
         小傻瓜
         </a>   
      </li>
    </ul>
  </nav>
  
  <div class="scroll-content" data-scroll-content>
    
    <article class="slide slide--1 js-slide">
      <div class="slide__inner">
        <div class="slide__img js-transition-img">
          <figure class="js-transition-img__inner">
            <img src="img/01.jpg" draggable="false">
          </figure>
        </div>
      </div>
    </article>
    
    <article class="slide slide--2 js-slide">
      <div class="slide__inner">
        <div class="slide__img js-transition-img">
          <figure class="js-transition-img__inner">
            <img src="img/03.jpg" draggable="false">
          </figure>
        </div>
      </div>
    </article>
    
    <article class="slide slide--3 js-slide">
      <div class="slide__inner">
        <div class="slide__img">
          <figure>
            <img src="img/02.jpg" draggable="false">
          </figure>
        </div>
      </div>
    </article>

    <article class="slide slide--4 js-slide">
      <div class="slide__inner">
        <div class="slide__img">
          <figure>
            <img src="img/04.jpg" draggable="false">
          </figure>
        </div>
      </div>
    </article>

    <article class="slide slide--1 js-slide">
      <div class="slide__inner">
        <div class="slide__img">
          <figure>
            <img src="img/05.jpg" draggable="false">
          </figure>
        </div>
      </div>
    </article>
    
    <article class="slide slide--2 js-slide">
      <div class="slide__inner">
        <div class="slide__img">
          <figure>
            <img src="img/06.jpg" draggable="false">
          </figure>
        </div>
      </div>
    </article>
    
    <article class="slide slide--3 js-slide">
      <div class="slide__inner">
        <div class="slide__img">
          <figure>
            <img src="img/07.jpg" draggable="false">
          </figure>
        </div>
      </div>
    </article>

    <article class="slide slide--4 js-slide">
      <div class="slide__inner">
        <div class="slide__img">
          <figure>
            <img src="img/08.jpg" draggable="false">
          </figure>
        </div>
      </div>
    </article>
    
  </div>  
  
  <div class="scroll-content scroll-content--last" data-scroll-content>
    
    <article class="slide slide--1 js-slide">
      <div class="slide__inner">
        <div class="slide__sub-title"><span><img src="img/心.png" alt=""></span></div>
        <h1 class="slide__title"><div class="js-transition-title">I</div></h1>
        <div class="slide__img slide__img--proxy"></div>
        <div class="slide__project"></div>
      </div>
    </article>
    
    <article class="slide slide--2 js-slide">
      <div class="slide__inner">
        <div class="slide__sub-title"><span><img src="img/心.png" alt=""></span></div>
        <h1 class="slide__title"><div class="js-transition-title">Love</div></h1>
        <div class="slide__img slide__img--proxy"></div>
        <div class="slide__project"></div>
      </div>
    </article>
    
    <article class="slide slide--3 js-slide">
      <div class="slide__inner">
        <div class="slide__sub-title"><span><img src="img/心.png" alt=""></span></div>
        <h1 class="slide__title">You</h1>
        <div class="slide__img slide__img--proxy"></div>
        <div class="slide__project"></div>
      </div>
    </article>

    <article class="slide slide--4 js-slide">
      <div class="slide__inner">
        <div class="slide__sub-title"><span><img src="img/心.png" alt=""></span></div>
        <h1 class="slide__title">嘻嘻</h1>
        <div class="slide__img slide__img--proxy"></div>
        <div class="slide__project"></div>
      </div>
    </article>
    

    <article class="slide slide--1 js-slide">
      <div class="slide__inner">
        <div class="slide__sub-title"><span><img src="img/心.png" alt=""></span></div>
        <h1 class="slide__title">Forever</h1>
        <div class="slide__img slide__img--proxy"></div>
        <div class="slide__project"></div>
      </div>
    </article>
    
    <article class="slide slide--2 js-slide">
      <div class="slide__inner">
        <div class="slide__sub-title"><span><img src="img/心.png" alt=""></span></div>
        <h1 class="slide__title">LY</h1>
        <div class="slide__img slide__img--proxy"></div>
        <div class="slide__project"></div>
      </div>
    </article>
    
    <article class="slide slide--3 js-slide">
      <div class="slide__inner">
        <div class="slide__sub-title"><span><img src="img/心.png" alt=""></span></div>
        <h1 class="slide__title">Baby</h1>
        <div class="slide__img slide__img--proxy"></div>
        <div class="slide__project"></div>
      </div>
    </article>

    <article class="slide slide--4 js-slide">
      <div class="slide__inner">
        <div class="slide__sub-title"><span><img src="img/心.png" alt=""></span></div>
        <h1 class="slide__title">啊噢</h1>
        <div class="slide__img slide__img--proxy"></div>
        <div class="slide__project"></div>
      </div>
    </article>
    
  </div>
  
  <div class="scrollbar" data-scrollbar>
    <div class="scrollbar__handle js-scrollbar__handle"></div>
  </div>
  
</div>

<div class="mask js-mask">
  <div class="mask__slice js-mask__slice"></div>
  <div class="mask__slice js-mask__slice"></div>
  <div class="mask__slice js-mask__slice"></div>
  <div class="mask__inner">
    <figure class="logo logo--mask">
      <img class="js-logo" src="img/logo.svg">
    </figure>
    <div class="mask-line js-mask-line">
      <div class="mask-line__inner js-mask-line"></div>
    </div>
  </div>
</div>
	
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/TweenMax.min.js'></script>
<script src='js/imagesloaded.pkgd.min.js'></script>
<script  src="./js/script.js"></script>
</body>
</html>